<template>
  <div v-if="item" class="w-full">
    <h3>{{ $t("business.common.basic") }}</h3>
    <table style="width: 100%" class="base-table">
      <tr>
        <td class="title">
          <el-text>{{ $t("commons.table.name") }}</el-text>
        </td>
        <td colspan="4">
          <el-text tag="b">
            {{ item.metadata.name }}
          </el-text>
        </td>
      </tr>
      <tr v-if="item.metadata.namespace">
        <td>
          <el-text>{{ $t("business.namespace.namespace") }}</el-text>
        </td>
        <td colspan="4">
          <el-text type="warning" tag="b">
            {{ item.metadata.namespace }}
          </el-text>
        </td>
      </tr>
      <tr v-if="item.metadata.finalizers">
        <td>
          <el-text> Finalizers</el-text>
        </td>
        <td colspan="4">
          <div
            v-for="value in item.metadata.finalizers"
            v-bind:key="value"
            class="myTag"
          >
            <el-tag type="info" size="small">
              {{ value.length > 100 ? value.substring(0, 100) + "..." : value }}
            </el-tag>
          </div>
        </td>
      </tr>
      <tr v-if="hasPodContainers()">
        <td>
          <el-text>{{ $t("business.pod.image") }}</el-text>
        </td>
        <td colspan="4">
          <div
            v-for="(item, index) in containers"
            v-bind:key="index"
            class="myTag"
          >
            <el-tag type="info" size="small">
              {{ item.image }}
            </el-tag>
          </div>
        </td>
      </tr>
      <tr v-if="item.kind === 'Namespace'">
        <td>
          <el-text> Resource Quotas</el-text>
        </td>
        <td colspan="4">
          <div
            v-for="(item, index) in resourceQuotas"
            v-bind:key="index"
            class="my-tag"
          >
            <el-link @click="toResourceQuota(item)">
              {{ item.metadata.name }}
            </el-link>
          </div>
        </td>
      </tr>
      <tr v-if="item.kind === 'Namespace'">
        <td>
          <el-text> Limit Ranges</el-text>
        </td>
        <td colspan="4">
          <div
            v-for="(item, index) in limitRanges"
            v-bind:key="index"
            class="my-tag"
          >
            <el-link @click="toLimitRange(item)">
              {{ item.metadata.name }}
            </el-link>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <el-text>{{ $t("commons.table.created_time") }}</el-text>
        </td>
        <td colspan="4">
          <el-tooltip :content="timeTrans(item.metadata?.creationTimestamp)">
            <el-text>
              {{ getAge(item.metadata?.creationTimestamp) }}
            </el-text>
          </el-tooltip>
        </td>
      </tr>
      <tr>
        <td class="title">
          <el-text>{{ $t("business.common.label") }}</el-text>
        </td>
        <td colspan="4">
          <ko-detail-key-value
            v-if="Object.keys(item.metadata).length > 0"
            :valueObj="item.metadata.labels"
          />
        </td>
      </tr>
      <tr>
        <td class="title">
          <el-text>{{ $t("business.common.annotation") }}</el-text>
        </td>
        <td colspan="4">
          <ko-detail-key-value
            v-if="Object.keys(item.metadata).length > 0"
            :valueObj="item.metadata.annotations"
          />
        </td>
      </tr>
    </table>
    <div class="bottom-button">
      <el-button @click="showYaml">
        {{ $t("commons.button.view_yaml") }}
      </el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import KoDetailKeyValue from "@/views/domain/kubeHud/views/components/detail/detail-key-value.vue";
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import {
  BaseResource,
  Container,
  LimitRange,
  useK8SApi
} from "@/views/domain/kubeHud/api/k8s";
import { getAge, timeTrans } from "../../../utils";

const { limitRangeRepo, quotasRepo } = useK8SApi();

type Prop = {
  item: BaseResource & any;
  yamlShow: boolean;
};

const props = defineProps<Prop>();
const emit = defineEmits(["update:yamlShow"]);

const show = ref(false); //  是否显示yaml
const containers = ref([]); // 容器
const limitRanges = ref<LimitRange[]>([]); // 限制范围
const resourceQuotas = ref([]); // 资源配额
const cluster = ref(""); // 集群

const route = useRoute();
const router = useRouter();

onMounted(() => {
  show.value = props.yamlShow;
  cluster.value = `${route.query?.cluster || ""}`;
  if (props.item.kind === "Namespace") {
    listResources();
  }
});

const showYaml = () => {
  show.value = !show.value;
  emit("update:yamlShow", show.value);
};

const hasPodContainers = () => {
  if (props.item?.spec?.template?.spec?.containers) {
    containers.value = props.item.spec.template.spec.containers;
    return true;
  } else if (props.item?.spec?.jobTemplate?.spec?.template?.spec?.containers) {
    containers.value =
      props.item.spec.jobTemplate.spec.template.spec.containers;
    return true;
  } else {
    return false;
  }
};

const listResources = () => {
  quotasRepo
    .listResourceQuotas({ cluster: cluster.value })
    .then(({ items, ok }) => {
      if (ok) {
        resourceQuotas.value = items;
      }
    });

  limitRangeRepo
    .listLimitRanges({ cluster: cluster.value })
    .then(({ items, ok }) => {
      if (ok) {
        limitRanges.value = items;
      }
    });
};

const toResourceQuota = (row: any) => {
  router.push({
    name: "ResourceQuotaDetail",
    params: { namespace: row.metadata.namespace, name: row.metadata.name }
  });
};

const toLimitRange = (row: any) => {
  router.push({
    name: "LimitRangeDetail",
    params: { namespace: row.metadata.namespace, name: row.metadata.name }
  });
};
</script>

<style scoped lang="scss"></style>
